<template>
	<view class="nodes-allot-vison wf-box">
		<HeadNav titleName="节点分配" :navBarHeight="navBarHeight">
			<template v-slot:rightIcon>
				<image src="../../static/img/me-74.png" class="sys"></image>
			</template>
		</HeadNav>
		
		<!-- <view class="main">
			
		</view> -->
		<view class="allot-ul" :style="{ paddingTop: navBarHeight }">
			<view class="allot-li" v-for="itme in allotList">
				<image class="allot-banner" :src="itme.banner" mode="widthFix"></image>
				<view class="allot-main">

					<view class="allot-left">
						<view class="name-view">
							<view class="name">
								{{itme.name}}
							</view>
							<view class="openTime">
								{{itme.openTime}}
							</view>
						</view>
						<view class="presell-view">

							<view class="">
								<view class="presell-text">
									预售数量
								</view>
								<view class="presell-value">
									{{itme.presellNum}}
								</view>
							</view>
							<view class="">
								<view class="presell-text">
									期数
								</view>
								<view class="presell-value">
									{{itme.periods}}
								</view>
							</view>
						</view>
					</view>
					<view class="allot-ionc-view">


						<image class="allot-icon" :src="itme.icon" mode="widthFix"></image>
					</view>
				</view>
				<button class="allot-btn">正在进行中</button>
			</view>
			<view class="not-view" v-if="allotList.length == 0">
				<image src="../../static/img/not-icon.png" style="width: 386rpx;" mode="widthFix"></image>
				<view class="not-text">
					暂无记录
				</view>
			</view>
			
			
		</view>


	</view>
</template>

<script>
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				allotList: [{
						name: '超级节点',
						openTime: '开放时间：2024-03-28 14:00',
						presellNum: 20,
						periods: 1,
						icon: '../../static/img/allot-icon1.png',
						banner: '../../static/img/allot-banner1.png',

					},
					{
						name: '轻节点',
						openTime: '开放时间：2024-03-28 14:00',
						presellNum: 20,
						periods: 1,
						icon: '../../static/img/allot-icon2.png',
						banner: '../../static/img/allot-banner2.png',

					}
				]
			}
		},
		components: {
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;
		padding-bottom: 40rpx;
		
		.sys {
			width: 48rpx;
			height: 48rpx;
		}
	}
	
	.allot-ul {
		// width: 100%;
		padding: 0 30rpx;
		margin-top: 126rpx;
		.allot-li {
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			margin-bottom: 30rpx;
			// margin: 30rpx auto 30rpx;

			.allot-banner {
				width: 100%;
			}

			.allot-main {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				padding: 30rpx;
				box-sizing: border-box;

				.allot-left {
					.name-view {
						.name {
							font-size: 34rpx;
							color: #333333;
						}

						.openTime {
							font-size: 28rpx;
							margin: 24rpx 0 72rpx;
							color: #666666;
						}
					}

					.presell-view {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 60%;

						.presell-text {
							font-size: 24rpx;
							color: #999999;
							margin-bottom: 12rpx;
						}

						.presell-value {
							font-size: 29rpx;
							color: #333333;
						}
					}
				}

				.allot-ionc-view {


					.allot-icon {
						width: 240rpx;
						height: 216rpx;
					}
				}
			}

			.allot-btn {
				width: 84%;
				margin-left: 8%;
				height: 83rpx;
				background: #3F93FF;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				color: #fff;

				margin-bottom: 30rpx;
			}
		}
	}
	
	.not-view{
		width: 100%;
		height: 90vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.not-text{
			font-size: 24rpx;
			color: #999999;
			margin-top: 30rpx;
		}
	}
</style>